/*
*  功能：存储应用程序状态
*    1) 左侧导航栏显示/隐藏状态
 */

import Cookies from 'js-cookie'

const SET_SIDEBAR_COLLAPSE_STATE = 'setSidebarCollapseState'
const APP_COOKIE_SIDBAR_COLLAPSED = 'APP_COOKIE_SIDBAR_COLLAPSED'

//定义state
const state = {
  sidebar: {
    collapsed: Cookies.get(APP_COOKIE_SIDBAR_COLLAPSED) == 1 ? true : false
  }
}

//定义getters -- 相当于Store的计算属性
const getters = {
  sidebarCollapsed: function (state, getters) {
    return state.sidebar.collapsed
  }
}

//Mutations
//作用：同步调用 store.commit 方法，更改 Vuex 的 store 中的状态的唯一方法
const mutations = {
  [SET_SIDEBAR_COLLAPSE_STATE]: function (state, collapsed) {
    Cookies.set(APP_COOKIE_SIDBAR_COLLAPSED, collapsed ? 1 : 0)
    state.sidebar.collapsed = collapsed
  }
}

//Actions
//作用：1.提交的是 mutation，而不是直接变更状态
//     2.可以包含任意异步操作
const actions = {
  setSidebarCollapseState: function ({commit}, collapsed) {
    commit(SET_SIDEBAR_COLLAPSE_STATE, collapsed)
  }
}

export default {
  state,
  getters,
  mutations,
  actions
}
